<template>
  <el-tag :type="tagType" :size="size" :effect="effect">
    {{ grade }}
  </el-tag>
</template>

<script setup lang="ts">
import { getGradeLevelTagType } from '@/utils/eval'

interface Props {
  /** 等级 */
  grade: string
  /** 标签大小 */
  size?: 'large' | 'default' | 'small'
  /** 标签效果 */
  effect?: 'dark' | 'light' | 'plain'
}

const props = withDefaults(defineProps<Props>(), {
  size: 'default',
  effect: 'light'
})

/** 标签类型 */
const tagType = computed(() => {
  return getGradeLevelTagType(props.grade)
})
</script>
